<template>
  <div class="amount-config">
    <el-card>
      <div slot="header">
        <span>停车收费标准</span>
      </div>
      <el-form :model="form" label-width="120px">
        <el-form-item label="5小时内收费标准 (元/小时)">
          <el-input v-model="form.charge_5h" type="number" placeholder="请输入5小时内收费标准"/>
        </el-form-item>

        <el-form-item label="1天内收费标准 (元/小时)">
          <el-input v-model="form.charge_1d" type="number" placeholder="请输入1天内收费标准"/>
        </el-form-item>

        <el-form-item label="3天内收费标准 (元/小时)">
          <el-input v-model="form.charge_3d" type="number" placeholder="请输入3天内收费标准"/>
        </el-form-item>

        <el-form-item label="7天内收费标准 (元/小时)">
          <el-input v-model="form.charge_7d" type="number" placeholder="请输入7天内收费标准"/>
        </el-form-item>

        <el-form-item label="超过7天收费标准 (元/小时)">
          <el-input v-model="form.charge_over_7d" type="number" placeholder="请输入超过7天收费标准"/>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="saveAmount">保存设置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import {getAmount, setAmount} from '@/api/system/amount' // 引入封装的接口

export default {
  data() {
    return {
      form: {
        charge_5h: 0,
        charge_1d: 0,
        charge_3d: 0,
        charge_7d: 0,
        charge_over_7d: 0
      }
    }
  },
  created() {
    // 在组件创建时调用getAmount方法，确保获取数据
    this.getAmount()
  },
  methods: {
    // 获取收费标准
    async getAmount() {
      try {
        const responses = await Promise.all([
          getAmount('5h'),
          getAmount('1d'),
          getAmount('3d'),
          getAmount('7d'),
          getAmount('over7d')
        ])

        // 更新form的值
        this.form.charge_5h = responses[0].data
        this.form.charge_1d = responses[1].data
        this.form.charge_3d = responses[2].data
        this.form.charge_7d = responses[3].data
        this.form.charge_over_7d = responses[4].data
      } catch (error) {
        console.error('获取收费标准失败:', error)
        this.$message.error('加载收费标准失败')
      }
    },

    // 保存收费标准
    saveAmount() {
      setAmount('5h', this.form.charge_5h).then(() => {
        this.$message.success('5小时内收费标准保存成功')
      })
      setAmount('1d', this.form.charge_1d).then(() => {
        this.$message.success('1天内收费标准保存成功')
      })
      setAmount('3d', this.form.charge_3d).then(() => {
        this.$message.success('3天内收费标准保存成功')
      })
      setAmount('7d', this.form.charge_7d).then(() => {
        this.$message.success('7天内收费标准保存成功')
      })
      setAmount('over7d', this.form.charge_over_7d).then(() => {
        this.$message.success('超过7天收费标准保存成功')
      })
    }
  }
}
</script>

<style scoped>
.amount-config {
  padding: 20px;
}
</style>
